<template>
    <div class="flex-box">
        <heade-return :title-params="nametop"></heade-return>
        <div class="flex-user" v-show="flags">
            <p>用户名</p>
            <div class="binding-list-box">
                <input v-model="formdata.usename" placeholder="请输入用户名">
            </div>
        </div>
        <div v-show="flagss">
            <div class="flex-user">
                <p v-if="strName == 'payPassword1'">手机号</p>
                <p v-else>原手机号</p>
                <div class="binding-list-box">
                    <input v-if="strName == 'payPassword1'" v-model="formdata.phonumber" placeholder="请输入手机号">
                    <input v-else v-model="formdata.phonumber" placeholder="请输入原手机号">
                </div>
            </div>
            <div class="flex-user">
                <p>验证码</p>
                <div class="binding-list-box">
                    <input v-model="formdata.verification" placeholder="请输入验证码">
                    <h1>
                        <span v-if="showCode1" @click="uservifivation(formdata.phonumber)">获取验证码</span>
                        <span v-if="showCode2" @click="uservifivation(formdata.phonumber)">重新获取</span>
                        <span v-if="showCode3">{{numTime}}s 后重新获取</span>
                    </h1>
                </div>
            </div>
        </div>
        <div v-show="flagsss">
            <div class="flex-user">
                <p>新手机号</p>
                <div class="binding-list-box">
                    <input v-model="formdata.newphonumber" placeholder="请输入新手机号">
                </div>
            </div>
            <div class="flex-user">
                <p>验证码</p>
                <div class="binding-list-box">
                    <input v-model="formdata.newverification" placeholder="请输入验证码">
                    <h1>
                        <span v-if="showNewCode1" @click="uservifivationNew(formdata.newphonumber)">获取验证码</span>
                        <span v-if="showNewCode2" @click="uservifivationNew(formdata.newphonumber)">重新获取</span>
                        <span v-if="showNewCode3">{{numNewTime}}s 后重新获取</span>
                    </h1>
                </div>
            </div>
        </div>
        <div v-show="showPayPass">
            <div class="flex-user">
                <p>支付密码</p>
                <div class="binding-list-box">
                    <input type="password" v-model="formdata.payPassword" placeholder="请输入支付密码（6位数字）">
                </div>
            </div>
            <div class="flex-user">
                <p>重复支付密码</p>
                <div class="binding-list-box">
                    <input type="password" v-model="formdata.payPasswordCopy" placeholder="请再次输入支付密码（6位数字）">
                </div>
            </div>
        </div>
        <div class="flex-btn" @click="flexPayPassSet()" v-show="showPayPassSet">
            验证
        </div>
        <div class="flex-btn" @click="flexsure()" v-show="flags">
            确认
        </div>
        <div class="flex-btn" @click="flexPayPass()" v-show="showPayPass">
            确认
        </div>
        <div class="flex-btn" v-show="flagss && !showPayPassSet" @click="flexsureOld()">
            验证后绑定新手机
        </div>
        <div class="flex-btn" v-show="flagsss" @click="flexsureNew()">
            验证绑定新手机
        </div>
    </div>
</template>

<script>
    import headeReturn from "../public/head"

    export default {
        name: "usernameflex",
        components: {
            headeReturn: headeReturn
        },
        data() {
            return {
                nametop: "",
                formdata: [{usename: ""}, {phonumber: ''}, {verification: ''},{newphonumber: ''}, {newverification: ''},{payPassword: ''},{payPasswordCopy: ''},],
                flags: true,
                flagss: false,
                flagsss: false,
                userId:"",
                strName:"",
                numTime:60,
                numNewTime:60,
                showCode1:true,
                showCode2:false,
                showCode3:false,
                showNewCode1:true,
                showNewCode2:false,
                showNewCode3:false,
                showPayPass:false,
                showPayPassSet:false,
            }
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.strName = this.$route.params.str;
            this.flags = false;
            this.flagss = false;
            if(this.strName == 'userName'){
                this.flags = true;
                this.nametop = "修改用户名";
            }
            if(this.strName == 'phoneName'){
                this.nametop = "修改手机号";
                this.flagss = true;
            }
            if(this.strName == 'payPassword1'){
                this.nametop = "修改交易密码";
                this.flagss = true;
                this.showPayPassSet = true;
            }
            if(this.strName == 'payPassword0'){
                this.nametop = "设置交易密码";
                this.showPayPass = true;
            }
        },
        methods: {
            flexPayPass(){
                if (this.formdata.payPassword === "" || this.formdata.payPasswordCopy === "") {
                    this.$toast('支付密码不能为空');
                }else if(this.formdata.payPassword.length!=6 || this.formdata.payPasswordCopy.length!=6){
                    this.$toast('支付密码为六位小数');
                }else if(this.formdata.payPassword != this.formdata.payPasswordCopy){
                    this.$toast('两次输入的支付密码不一致');
                }else {                    
                    this.$http.post(this.utils.config+"/netmall/app/person/api/setAlipayPwd?userId="+this.userId+"&payPassword="+this.formdata.payPassword).then((data) => {
                        this.$toast(data.data.message);
                        this.$router.push('/Setting')
                    })
                    // this.flags = false;
                    // this.flagss = true;
                }
            },
            flexsure() {
                if (this.formdata.usename === "" || this.formdata.usename === undefined) {
                    this.$toast('请输入用户名');
                } else {                    
                    this.$http.post(this.utils.config+"/netmall/app/person/api/updateUserName?id="+this.userId+"&userName="+this.formdata.usename).then((data) => {
                        this.$toast(data.data.message);
                        this.$router.push('/Setting')
                    })
                    // this.flags = false;
                    // this.flagss = true;
                }
            },
            testFlex(num) {
                if (/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(num)) {
                    return true
                } else {
                    return false
                }
            },
            flexPayPassSet(){
                if (/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.formdata.phonumber)) {
                    if (this.formdata.verification === "") {
                        this.$toast('请输入验证码');
                    } else {                        
                        this.$http.post(this.utils.config+"/netmall/app/person/api/checkOldPhone?user_id="+this.userId+"&phone="+this.formdata.phonumber+"&code="+this.formdata.verification).then((data) => {
                            if(data.data.success){
                                this.$toast(data.data.message);
                                this.flagss = false;
                                this.showPayPassSet = false;
                                this.showPayPass = true;
                            }else{
                                this.$toast(data.data.message);
                            }
                        })
                    }
                } else {
                    this.$toast('手机号不正确');
                }
            },
            flexsureOld() {
                if (/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.formdata.phonumber)) {
                    if (this.formdata.verification === "") {
                        this.$toast('请输入验证码');
                    } else {                        
                        this.$http.post(this.utils.config+"/netmall/app/person/api/checkOldPhone?user_id="+this.userId+"&phone="+this.formdata.phonumber+"&code="+this.formdata.verification).then((data) => {
                            if(data.data.success){
                                this.$toast(data.data.message);
                                this.flagss = false;
                                this.flagsss = true;
                            }else{
                                this.$toast(data.data.message);
                            }
                        })
                    }
                } else {
                    this.$toast('手机号不正确');
                }
            },
            flexsureNew() {
                if (/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.formdata.newphonumber)) {
                    if (!this.formdata.newverification) {
                        this.$toast('请输入验证码');
                    } else {
                        this.$http.post(this.utils.config+"/netmall/app/person/api/updatePhone?user_id="+this.userId+"&newPhone="+this.formdata.newphonumber+"&code="+this.formdata.newverification).then((data) => {
                            if(data.data.success){
                                this.$toast(data.data.message);
                                this.$router.push('/Setting');
                            }else{
                                this.$toast(data.data.message); 
                            }
                        })
                    }
                } else {
                    this.$toast('手机号不正确');
                }
            },
            uservifivation(phone) {
                var that = this; 
                if(!that.testFlex(phone)){
                    that.$toast('手机号不正确');
                    return
                }    
                that.$http.post(that.utils.config+"/netmall/user/app/api/sendSMS?phone="+phone).then((data)=>{
                    that.showCode2 = false;
                    that.showCode1 = false;
                    that.showCode3 = true;
                    var setTime = setInterval(()=>{
                        if(that.numTime == 1){
                            that.numTime = 60;
                            clearInterval(setTime);
                            that.showCode3 = false;
                            that.showCode2 = true;
                        }else{
                            that.numTime--
                        }
                    },1000)            
                })
            },
            uservifivationNew(phone) {
                var that = this;
                if(!that.testFlex(phone)){
                    that.$toast('手机号不正确');
                    return
                }    
                that.$http.post(that.utils.config+"/netmall/user/app/api/sendSMS?phone="+phone).then((data)=>{
                    that.showNewCode1 = false;
                    that.showNewCode2 = false;
                    that.showNewCode3 = true;
                    var setNewTime = setInterval(()=>{
                        if(that.numNewTime == 1){
                            that.numTime = 60;
                            clearInterval(setNewTime);
                            that.showNewCode3 = false;
                            that.showNewCode2 = true;
                        }else{
                            that.numNewTime--
                        }
                    },1000)            
                })
            }
        }

    }
</script>

<style scoped>
    .flex-box {
        min-height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 1);
    }

    .flex-user {
        margin-top: 30px;
        height: 70px;
        width: 100%;
        padding: 0 14px;
    }

    .flex-user p {
        font-size: 12px;
        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
        font-weight: 500;
        color: rgba(136, 136, 136, 1);
        line-height: 18px;
    }

    .binding-list-box {
        position: relative;
        height: 46px;
        width: 100%;
        border-bottom: 1px solid #EDEDED;
    }

    .binding-list-box input {
        margin-top: 10px;
        border: none;
        font-size: 16px;
        font-weight: 400;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        line-height: 24px;
    }

    input::-webkit-input-placeholder {
        font-size: 16px;
        color: rgba(219, 219, 219, 1);

    }

    .flex-btn {
        width: 90%;
        height: 45px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 45px;
        text-align: center;
        position: fixed;
        bottom: 25px;
        left: 0;
        right: 0;
        margin: auto;
        background: linear-gradient(90deg, rgba(255, 90, 160, 1) 0%, rgba(255, 46, 103, 1) 100%);
        border-radius: 4px;
    }

    h1 {
        font-size: 14px;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: rgba(255, 46, 103, 1);
        line-height: 20px;
        position: absolute;
        right: 0;
        top: 12px;
    }
</style>
